<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>星辰一阶段最终boss</title>
    <link rel="stylesheet" href="style/one.css" />
    <link rel="stylesheet" href="style/two.css" />
    <link rel="stylesheet" href="style/three.css" />
    <link rel="stylesheet" href="style/four.css" />
    <link rel="stylesheet" href="style/five.css" />
    <link rel="stylesheet" href="style/six.css" />
  </head>

  <body>
    <div class="box_one">
      <div class="text_one">
        <article class="article_one">
          <h1 class="h_one">Hello world</h1>
          <p class="p_one">
            China is speeding up strategic plan,standard,traffic rules,laws and
            regulations<br />
          </p>
          <p class="p_one">
            on accident-incurred liabilities for its smarrt industry.Economic
            Information<br />
          </p>
          <p class="p_one">Daily reported Thursday</p>
        </article>
        <div class="sign_in">
          <p class="p_one_one">CREATE YOUR ACCOUNT</p>
          <p class="p_one_two">IT IS ABSOLUTELY FREE</p>
          <input type="email" value="your email" class="input_one" />
          <input type="text" value="Create your password" class="input_one" />
          <button>SIGN UP</button>
        </div>
      </div>
    </div>

    <!-- 这是第一个网页页面的盒子，使用了弹性盒子布局使整体居中，而盒子内部的元素则是正常文档流 -->

    <div class="flex_two">
      <div class="box_two">
        <article class="article_two">
          <p>BOATLOADS OF AWESOME</p>
          <h2 class="h2_two">
            Ready-made,customizable,HTML landing page sections
          </h2>
        </article>
        <div class="grid_one">
          <div class="div_two">
            <img src="images/图标一.png" class="image_two" />
            <h4>Mobile first</h4>
            <p>all modulz are buliy first for maximum aevice compatibility</p>
          </div>
          <div class="div_two">
            <img src="images/图标二.png" class="image_two" />
            <h4>Accessibility</h4>
            <p>manipulating mental images for ideological purposes.</p>
          </div>
          <div class="div_two">
            <img src="images/图标三.png" class="image_two" />
            <h4>Fluid typography</h4>
            <p>
              Images perpetuated in public education, mediaculture have a
              profound impact on the formation
            </p>
          </div>
          <div class="div_two">
            <img src="images/图标四.png" class="image_two" />
            <h4>Customization</h4>
            <p>all modulz are buliy first for maximum aevice compatibility</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 这第二个页面我采用了弹性盒子使得整体居中，然后浮动来处理图片，网格使得下面四个可以比较轻松的成型 -->

    <div class="box_three">
      <div class="box_box_three">
        <div class="box_left">
          <h2 class="h2_three">Supportive policies for China's smart car</h2>
          <p class="text_three">
            What makes them so powerful is that they circumvent the faculties of
            the conscious mind but, instead, directly target the subconscious
            and affective, thus evading direct inquiry through contemplative
            reasoning. By doing so such axiomatic images tell us what we shall
            desire (liberalism,
          </p>
          <button class="button_three">CHECK OUT FEEATURES</button>
          <button class="button_three">TRY PRODUCT FOR FREE</button>
        </div>
        <div class="box_right">
          <h3>资料</h3>
          <p class="text_three">
            这里有一些教程，文档或示例，可以帮助你学习或者摸鱼
          </p>
          <div class="lazy">
            <img src="images/偷懒一.png" />
            <img src="images/偷懒二.png" />
            <img src="images/偷懒一.png" />
          </div>
        </div>
      </div>
    </div>

    <!-- 果然弹性盒子居中就是方便！最后那三个图形用了网格，其实用弹性盒子也挺不错的 -->

    <div class="box_four">
      <box class="box_box_four">
        <h2 class="h2_four">Try our Awesome Products</h2>
        <div class="article_four">
          <div class="article_four_one">
            <img src="images/艺术字一.png" />
            <article>
              What makes them so powerful is that they circumvent the faculties
              of the conscious mind but, instead, directly target the
              subconscious and affective, thus evading direct inquiry through
              contemplative
            </article>
          </div>
          <div class="article_four_one">
            <img src="images/艺术字二.png" />
            <article>
              What makes them so powerful is that they circumvent the faculties
              of the conscious mind but, instead, directly target the
              subconscious and affective, thus evading direct inquiry through
              contemplative
            </article>
          </div>
          <div class="article_four_one">
            <img src="images/艺术字三.png" />
            <article>
              What makes them so powerful is that they circumvent the faculties
              of the conscious mind but, instead, directly target the
              subconscious and affective, thus evading direct inquiry through
              contemplative
            </article>
          </div>
        </div>
      </box>
    </div>
    <hr />

    <div class="box_six">
      <div class="box_box_six">
        <div class="photo_box">
          <img src="images/Photo.png" class="img_six_left" />
          <h3>learn how to Imprve You Personal business</h3>
          <p>
            What makes them so powerful is that they circumvent the faculties of
            the conscious mind but, instead, directly target the subconscious
            and affective,China is speeding up strategic plan,standard,traffic
            rules,laws and regulations
          </p>
        </div>
        <div class="photo_box">
          <img src="images/Photo2.png" class="img_six_right" />
          <h3>Choose between Two butifully Designed Color Schemes</h3>
          <p>
            What makes them so powerful is that they circumvent the faculties of
            the conscious mind but, instead, directly target the subconscious
            and affective,China is speeding up strategic plan,standard,traffic
            rules,laws and regulations
          </p>
        </div>
      </div>
    </div>
    <hr />

    <!-- 这个so easy啦，直接一个弹性盒子解决 -->

    <div class="box_five">
      <div class="box_box_five">
        <h2>Our Awesomne Crew</h2>
        <p>
          What makes them so powerful is that they circumvent the faculties of
          the conscious mind but, instead,
        </p>
        <div class="box_people">
          <div class="cover_one">
            <div class="content">
              <h4>Ethan Dutton</h4>
              <p>A good engineer</p>
            </div>
          </div>
          <div class="cover_two">
            <div class="content">
              <h4>Ethan Dutton</h4>
              <p>A good engineer</p>
            </div>
          </div>
          <div class="cover_three">
            <div class="content">
              <h4>Ethan Dutton</h4>
              <p>A good engineer</p>
            </div>
          </div>
          <div class="cover_four">
            <div class="content">
              <h4>Ethan Dutton</h4>
              <p>A good engineer</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 遮罩层还没有实现，我想下来之后再去试试 -->

    <div class="footer">
      <!-- 请容许我偷下懒！我是真的不想做底栏了和前面也差不多 -->
      <img src="images/底栏.png" />
    </div>
  </body>
</html>
